﻿<div [@routerTransition]>

    <div class="invoice-content-2">
        <div class="row invoice-head">
            <div class="col-md-7 col-xs-6">
                <span style="font-size: 18px; color: gray; margin-right: 5px;">{{l('Invoice')}}</span> <span style="font-size: 18px; color: #000;">#{{invoiceInfo.invoiceNo}}</span><br />
                <span style="font-size: 18px; color: gray; margin-right: 5px;">{{l('Date')}}</span> <span style="font-size: 18px; color: #000;">{{invoiceInfo.invoiceDate | momentFormat:'YYYY-MM-DD'}}</span>
                <br />
                <br />
                <span class="bold uppercase">{{invoiceInfo.tenantLegalName}}</span>
                <span *ngFor="let addressLine of invoiceInfo.tenantAddress">
                    <br />{{addressLine}}
                </span>
                <br />{{l("Tax/VatNo")}}: {{invoiceInfo.tenantTaxNo}}
            </div>
            <div class="col-md-5 col-xs-6">
                <div class="company-address">
                    <div class="invoice-logo">
                        <img src="/assets/common/images/logo.png" class="img-responsive" alt="">
                    </div>
                    <span class="bold uppercase">{{invoiceInfo.hostLegalName}}</span>
                    <span *ngFor="let addressLine of invoiceInfo.hostAddress">
                        <br />{{addressLine}}
                    </span>
                </div>
            </div>
        </div>
        <div class="row invoice-body">
            <div class="col-xs-12 table-scrollable table-scrollable-borderless">
                <table class="table table-hover table-light">
                    <thead>
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>{{l("Edition")}}</th>
                            <th style="width: 100px;">{{l("Amount")}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>{{invoiceInfo.editionDisplayName}}</td>
                            <td>${{invoiceInfo.amount | number: '1.2-2'}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row invoice-subtotal">
            <hr />
            <div class="col-xs-9">
                <h2 class="invoice-title uppercase" style="font-size: 35px; font-weight: 300; color: #000;">{{l("Total")}}</h2>
            </div>
            <div class="col-xs-3">
                <p class="invoice-desc" style="font-size: 35px; font-weight: 300; color: #000; text-align: right;">${{invoiceInfo.amount | number: '1.2-2'}}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <a class="btn btn-lg green-haze hidden-print uppercase print-btn" onclick="javascript:window.print();">{{l("Print")}}</a>
            </div>
        </div>
    </div>

</div>
